
<template>
    <div :id="props.id" :ref="setItemRef" class="echarts-container" :style="{ width: props.width + 'px', height: '100%' }"></div>
</template>
<script setup lang="ts" name="compositeLineOEE">

import { ref, inject, onBeforeUnmount, defineProps } from 'vue';
const props = defineProps({
    width: {
        type: Number,
        default: 0
    },
    id: {
        type: String,
        default: ''
    },
    color: {
        type: String,
        default: ''
    },
    dataX: {
        type: Array,
        default: ''
    },
    dataY: {
        type: Array,
        default: ''
    }
})
// 获取echart挂载的DOM节点
const container = ref();

// 赋值动态ref到变量
const setItemRef = (el:any) => {
    if (el) {
        container.value = el
    }
}
// 定义延时器指针对象，便于组件实例销毁的时候以便清除
const timer = ref();

// 通过 inject 接收Echarts
const Echarts = inject('$echarts');
const getFontSize: any = inject('$getfontSize');

let datacoords:any = [
    {
    coords: [],
    },
];
for (let i = 0; i < props.dataX.length; i++) {
    datacoords[0].coords.push([props.dataX[i], props.dataY[i]]);
}

const initEchartsOneFn = () => {
    // echarts初始化
    const myChart = (Echarts as any).init(container.value);

    // 或
    // let myChart = proxy.$echarts.init(container.value);

    const option = {
        tooltip: {},
        xAxis: {
            data: props.dataX,
            axisLabel: {
                color: 'white',
                fontSize: getFontSize(20),
                rotate: 0,
                margin: 15
            },
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#EEEEF1',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['rgb(230 230 230 / 10%)'],
                    // type:'dashed',
                    dashOffset: 3
                }
            },
        },
        grid: {
            //适配小屏
            left: '8%',
            top: '5%',
            right: '4%',
            bottom: '13%'
        },
        yAxis: {
            axisLabel: {
                color: 'white',
                fontSize: getFontSize(20),
                margin: 15
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#EEEEF1',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['rgb(230 230 230 / 10%)'],
                    // type:'dashed',
                    dashOffset: 3
                }
            },
            min: 0,
            splitNumber: 10,
            max: 100,

        },
        series: [{
            name: 'oee',
            type: 'line',
            data: props.dataY,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 8,   //设定实心点的大小
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    color: props.color + ', .8)', //折点颜色
                    lineStyle: {
                        width: 4,
                        color: props.color + ', 0.5)' //折线颜色
                    }
                }
            },
            areaStyle: {
                color: 'rgb(225,225,225,0.1)'
            }


        }]
    }

    myChart.setOption(option);

    // 根据页面大小自动响应图表大小
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 判断定时器是否存在
if (timer.value) {
    clearTimeout(timer.value);
}

// 绑定定时器，销毁的时候再次清除
timer.value = setTimeout(() => initEchartsOneFn(), 1000);

// 组件实例销毁前清除延时器对象
onBeforeUnmount(() => {
    if (timer.value) clearTimeout(timer.value);
});
</script>

<style scoped >
.chart {
    margin: 0 auto;
}
</style>
